import { useState } from 'react';
import cn from '../cn';

type AvatarProps = {
  src?: string;
  alt?: string;
  size?: Size;
};

export default function Avatar({ src, alt, size = 'md' }: AvatarProps) {
  const [theSrc, setSrc] = useState<string | undefined>(src);

  const sizeClass = size === 'sm' ? 'h-8 w-8' : size === 'md' ? 'h-10 w-10' : 'h-12 w-12';

  return (
    <img
      className={cn(sizeClass, 'rounded-full border')}
      src={theSrc}
      alt={alt}
      onError={() => setSrc('/default-avatar.svg')}
    />
  );
}
